<template>
  <div>
    <el-breadcrumb separator="">
      <el-breadcrumb-item class="line" :to="{ path: $route.path }">{{
        $route.meta.title
      }}</el-breadcrumb-item>
      <el-button plain class="right">
        <a @click="shuaxin">
          <i class="el-icon-refresh"></i>
          刷新
        </a>
      </el-button>
      <el-button plain class="right" style="margin-right: 10px">
        <a @click="close">
          <i class="el-icon-close"></i>
          关闭
        </a>
      </el-button>
    </el-breadcrumb>
    <!-- 查看商品 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-collection-tag"></i> 数据列表
            <div class="rightTop">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
              >
                <el-form-item label="" style="padding-top: 6px">
                  <el-select
                    v-model="listLine.row"
                    placeholder="显示条数"
                    class="select-width-2"
                  >
                    <el-option label="10条" value="10"></el-option>
                    <el-option label="20条" value="20"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" style="padding-top: 6px">
                  <el-select
                    v-model="listLine.sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                    <el-option label="时间" value="Date"></el-option>
                    <el-option label="订单状态" value="OrderStatus"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="baseData" border>
              <el-table-column prop="Num" label="编号"></el-table-column>
              <el-table-column label="商品图片">
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.goodImg"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="goodName" label="商品名称">
                <template scope="scope">
                  {{ baseData[scope.$index].goodName.name }}
                  <p />
                  <i slot="suffix"
                    >品牌:{{ baseData[scope.$index].goodName.bank }}
                  </i>
                </template>
              </el-table-column>
              <el-table-column prop="priceOrGoodNum" label="价格/货号">
                <template scope="scope">
                  <i slot="prefix"
                    >价格: ￥{{ baseData[scope.$index].priceOrGoodNum.price }}
                  </i>
                  <p />
                  <i slot="suffix"
                    >货号: {{ baseData[scope.$index].priceOrGoodNum.goodNum }}
                  </i>
                </template>
              </el-table-column>
              <el-table-column
                prop="allHandselConsumeIntegral"
                label="总赠送消费积分(匠币)"
              >
              </el-table-column>
              <el-table-column
                prop="allHandselLevelIntegral"
                label="总赠送等级积分(成长值)"
              >
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="500"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 分页
      currentPage4: 4,
      listLine: {
        row: "",
        sort: ""
      },
      baseData: [
        {
          Num: 1000001,
          goodImg:
            "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3139879568,3874260001&fm=179&app=42&f=JPEG?w=121&h=140&s=0270128954A65FBBD6F5D4DB030090B1",
          goodName: { name: "2018 iphoneXsMax128GB", bank: "Apple Inc." },
          priceOrGoodNum: { price: 9599.0, goodNum: "No999999" },
          allHandselConsumeIntegral: 100000,
          allHandselLevelIntegral: 100000
        },
        {
          Num: 1000001,
          goodImg:
            "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3139879568,3874260001&fm=179&app=42&f=JPEG?w=121&h=140&s=0270128954A65FBBD6F5D4DB030090B1",
          goodName: { name: "2018 iphoneXsMax128GB", bank: "Apple Inc." },
          priceOrGoodNum: { price: 9599.0, goodNum: "No999999" },
          allHandselConsumeIntegral: 100000,
          allHandselLevelIntegral: 100000
        },
        {
          Num: 1000001,
          goodImg:
            "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3139879568,3874260001&fm=179&app=42&f=JPEG?w=121&h=140&s=0270128954A65FBBD6F5D4DB030090B1",
          goodName: { name: "2018 iphoneXsMax128GB", bank: "Apple Inc." },
          priceOrGoodNum: { price: 9599.0, goodNum: "No999999" },
          allHandselConsumeIntegral: 100000,
          allHandselLevelIntegral: 100000
        }
      ]
    }
  },
  methods: {
    shuaxin() {
      this.$router.go(0)
    },
    close() {
      window.opener = null
      window.open("about:blank", "_top").close()
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style scoped>
.rightTop {
  float: right;
}
.select-width-2 {
  width: 150px;
}
</style>
